<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 300px; height: 300px; background-color: black;" id="div"></div>
</body>
</html>
<script>
    var divww = document.getElementById("div")
    var cb = new BroadcastChannel("clane")
    divww.onmousedown = function(e){
        var x = e.offsetX
        var y = e.offsetY
        window.onmousemove = function(e){
            console.log(window.screen.width-(window.screen.width - (e.pageX + x)))
            cb.postMessage([e.pageX - x , e.pageY - y,window.innerWidth])
            divww.style.marginLeft = e.pageX - x + "px"
            divww.style.marginTop = e.pageY - y + "px"
        }
    }
    window.onmouseup = function(e){
        window.onmousemove = null//只是移除了onmousemove这个方法 当运行onmousedown的时候 还是会依此往下面执行
    }
    cb.addEventListener("message",function(e){
        console.log(window.screen.width - (window.screen.width-e.data[0])- window.innerWidth + "px","width")
        console.log((window.screen.height-e.data[1])-window.innerHeight + "px","height")
        divww.style.marginLeft = window.screen.width - (window.screen.width-e.data[0]) - e.data[2] + "px"
        divww.style.marginTop =  e.data[1] + "px"
    })
</script>